<template>
	<div>
		<fieldset>
			<legend>接口</legend>
			<div></div>
			<p>接口是对象的状态（属性）和行为（方法）的描述</p>
			<p>接口是一种类型，规范，规则，方法，能力，约束</p>
		</fieldset>
	</div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, ref } from "vue";
export default defineComponent({
    name: "Home",
    setup() {
        console.log("只读：readonly，非必须：?---------------------------");
        interface IUser {
            readonly name: string; // 必须有，只读readonly
            age: number; //必须有
            job?: string; // 非必须
        }
        let user: IUser = {
            name: "你大爷",
            age: 99,
        };

        // user.name = "你大爷牛逼"; // 只读的不能修改
        user.age = 100;
        user.job = "前端";
        console.log(user);

        // 函数类型------------------------------------------------------------
        console.log("函数类型----------------------------------------");
        interface IFun {
            (a: string, b: number): boolean;
        }
        let fun1: IFun = function (a: string, b: number) {
            return b > 1;
        };
        console.log(fun1("你大爷", 999));

        // 接口继承---------------------------------------------------------------
        console.log("接口继承extends----------------------------------------");
        interface aaa {
            user: string;
        }
        interface bbb {
            age: number;
        }
        interface inExtends extends aaa, bbb {
            job?: string;
        }
        let extend_my: inExtends = {
            user: "你大爷",
            age: 111,
            // job: "前端",
        };

        console.log("类类型------------------------------------------------");
        // 定义一个接口
        interface inAaa {
            fun1(): any
        }

        // 定义一个类。这个类的类型就是上面定义的接口
        // implements:实现
        class Aaa implements inAaa {
            fun1() {
                console.log("你大爷");
            }
        }
        let aaa_new = new Aaa();
        aaa_new.fun1();

        interface inBbb {
            fun2(): any;
        }

        // 一个类可以被多个接口约束
        class Bbb implements inAaa, inBbb {
					a?: 111
					fun1() {
							console.log("一个类可以被多个接口约束fun1");
					}
					fun2() {
							console.log("一个类可以被多个接口约束fun2");
					}
        }
        let bbb_new = new Bbb();
        bbb_new.fun1();
        bbb_new.fun2();
    },
});
</script>
